<template>
    <div class="onlineMovieDetails">
      <transition name="fade">
        <div class="mask-layer" v-show="mask">
          <div class="close" @click="mask=false"></div>
          <v-touch @swipeleft="_touchEvent" @swiperight="_touchEvent" @swiperup="_touchEvent" @swiperdown="_touchEvent" style="height: 100%;position: relative" @click="_touchEvent">
            <div class="indexes" style="color: #ffffff;padding:20px 10px;text-align: left;">{{posterIndex+1}}/{{posterList.length}}</div>
            <div class="pic-wrapper" ref="pic-wrapper" >
              <img :src="_posterUrl" alt="" style="max-width: 280px" height="auto" v-show="imgFade">
            </div>
          </v-touch>
        </div>
      </transition>
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
      </div>
      <loading v-show="isLoading"></loading>
      <refresh v-show="isRefresh"></refresh>
      <div class="content-wrapper" ref="content-wrapper">
        <div class="content" ref="container">
            <div v-show="false" class="mask-video-wrapper" style="position: absolute;top: 0;height: 200px;background: #449fdb">
              <video :src="indexVideo"
                     ref="video"
                     width="100%"
                     height="240px"
                     controls
                     >
              </video>
            </div>
          <div class="top">
            <div class="film-introduction">
              <div class="left">
                <img :src="filmInfo.posterPicUrl" alt="" style="width: 96px;height: 140px">
              </div>
              <div class="right">
                <h1 class="name">{{filmInfo.name}}</h1>
                <div class="score-wrapper">
                  <p class="score-name" v-show="filmInfo.score">观众评分</p>
                  <p class="score-count" v-show="filmInfo.score">{{filmInfo.score}}</p>
                </div>
                <div class="movie-type">
                  <div class="movie-type-text">{{filmInfo.filmStyle}}</div>
                  <div class="movie-type-tags">
                    <span class="movie-type-tag">{{filmInfo.filmTypeVersionDesc}}</span>
                  </div>
                </div>
                <div class="movie-text">{{filmInfo.country}}/{{filmInfo.filmDuration}}</div>
                <div class="movie-text">{{filmInfo.onlineDate}}</div>
              </div>
            </div>
            <div class="btn-wrapper">
              <div class="item">
                <button class="btn" @click="_doMyWantSee">&nbsp;<span class="icon icon_star" :class="{isCollect:isCollect}"></span> 想看</button>
              </div>
              <div class="item">
                <button class="btn" @click="_rating"><span class="icon icon_collect" :class="{isRating:isRating}"></span> 评论</button>
              </div>
            </div>
            <div class="text-wrapper" :class="{more:!isShowMore}">
              <div class="text" ref="text">
                {{filmInfo.desc}}
              </div>
            </div>
            <div class="show-more-wrapper" v-show="true" >
              <div class="btn" :class="{showMore:!isShowMore,hiddenMore:isShowMore}" @click="_toggleShowMore"></div>
            </div>
          </div>
          <div class="center">
            <div class="video-wrapper">
              <p class="name">影片预告片</p>
              <div class="content" ref="video-content" style="overflow: hidden">
                <div class="video-container" :style="{width:filmInfo.prevuesList.length*134-5+'px'}">
                  <div class="item" @click="_playVideo(item.url)" v-for="item in filmInfo.prevuesList"  :style="{background: 'url('+item.thumb+')no-repeat center/100% 100%'}" >
                    <div class="icon-play" ></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="poster-wrapper">
              <p class="name">影片剧照</p>
              <div class="content" ref="poster-content" style="overflow: hidden">
                <div class="poster-container" :style="{width:(filmInfo.filmPicUrlList.length*134-5)+'px'}" >
                  <div class="item" style="background: #00a0dc" v-for="(item,index) in filmInfo.filmPicUrlList" >
                    <img :src="item" alt=""  width="100%" height="100%" @click.prevent="_browsePicture(index,filmInfo.filmPicUrlList,0)">
                  </div>
                </div>
              </div>
            </div>
            <div class="actor-wrapper">
              <p class="name">演职人员</p>
              <div class="content" ref="actor-content">
                <div class="content-container" :style="{width:(filmInfo.castMemberList.length*80)-10+'px'}">
                  <div class="item" v-for="(item,index) in filmInfo.castMemberList">
                    <div class="item-img-wrapper" @click="_browsePicture(index,filmInfo.castMemberList,1)">
                      <img :src="item.url" alt="" style="width: 100%;height: 100%">
                    </div>
                    <div class="actor-name">{{item.name}}</div>
                    <div class="actor-portray">{{item.act?item.act:item.kariera}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="ratings-wrapper" v-show="filmInfo.commentList.length">
              <p class="name">评论</p>
              <div class="content">
                <div class="row border-1px" v-for="item in filmInfo.commentList">
                  <div class="user">
                    <div class="left">
                      <img :src="item.headPicUrl" alt="" class="avatar" style="width: 100%;height: 100%">
                    </div>
                    <div class="right">
                      <p class="user-name">{{item.userName?item.userName:item.phone}}</p>
                      <div class="user-score">
                        <div class="star-wrapper">
                          <star :score="item.starNumScore"></star>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ratings">{{item.content}}</div>
                  <p class="time">{{item.commentTimeDesc}}</p>
                </div>
                <div class="load-more-wrapper" v-show="filmInfo.commentList.length===3">
                  <span class="load-more" @click="$router.push({path:'/allRatings',query:{id:$route.query.id}})">
                    加载更多
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-bottom-wrapper">
        <button class="btn-bottom" @click="_buyTicket(text)" :class="{noTicket:text==='已售完'}">
          {{text}}
        </button>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import star from '../../../components/star/star'
  import loading from '../../../components/loading/loading'
  import BScroll from 'better-scroll'
  import { Popup,Toast } from 'mint-ui';
  import {getStorage} from "../../../common/js/localStorage";
  import refresh from '../../../components/refresh/refresh'
  import global from '../../../common/js/global'
    export default {
        name: "onlineMovieDetails",
        data(){
          return{
            isRefresh:false,
            isLoading:false,
            isCollect:false,
            text:'选座购票',
            isRating:false,
            mask:false,
            popupVisible:false,
            indexVideo:'',
            isShowMore:true,
            posterList:[],
            posterIndex:0,
            imgFade:true,
            isShow:'',
            video:['../../../../static/test.mp4','../../../../static/test1.mp4','../../../../static/test.mp4','../../../../static/test1.mp4','../../../../static/test1.mp4','../../../../static/test1.mp4'],
            poster:[],
            filmInfo:{
              filmPicUrlList:[],
              castMemberList:[],
              prevuesList:[],
              commentList:[]
            },
            filmName:''
          }
        },
        components:{
          'back':back,
          'star':star,
          'loading':loading,
          'refresh':refresh
        },
        created() {

        },
        mounted() {
          this._getMovieDetail()
          if(this.$refs['text'].clientHeight>=92){
            this.isShow = true
          }else {
            this.isShow = false
          }
          let scroll1 = new BScroll(this.$refs['video-content'],{
            scrollX:true,
            click:true,

          })
          let scroll2 = new BScroll(this.$refs['content-wrapper'],{
            click:true,
            pullUpLoad:{
              threshold:-50
            },
            pullDownRefresh: {
              threshold: 40,
              stop: 30
            }
          })
          scroll2.on('pullingDown', () => {
            this.isRefresh = true
            setTimeout(()=>{
              window.history.go(0)
              scroll.finishPullDown();
            },600)
          });
          let scroll3 = new BScroll(this.$refs['poster-content'],{
            scrollX:true,
          })
          let scroll4 = new BScroll(this.$refs['actor-content'],{
            scrollX:true,
            click:true
          })
        },
        methods:{
          //选座购票
          _buyTicket(text){
            if(text==='已售完'){
              return
            }
            this.$router.push({path:'/chooseCinema',query:{id:this.$route.query.id,name:this.filmName}})
          },
          //评论
          _rating(){
            if(getStorage('userInfo')===''||getStorage('userInfo')===undefined||getStorage('userInfo')===null){
              this.$router.push('/login')
            }else if(this.isRating){
              Toast('您已进行过评论')
              return
            }else {
              this.$router.push({path:'/rating',query:{id:this.$route.query.id,name:this.filmName}})
            }
          },
          //想看
          _doMyWantSee(){
            if(!getStorage('userInfo')){
              Toast('请先登录')
              return
            }
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/member/doMyWantSee',
                data:{
                  filmId:this.$route.query.id,
                  status:this.isCollect===true?-1:1
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  if(this.isCollect===false){
                    this.isCollect = true
                    Toast('收藏成功')
                  }else {
                    Toast('取消收藏')
                    this.isCollect = false
                  }

                }else{
                  Toast(res.data.errorMsg)
                }
              }else{
                Toast('服务器错误,错误代码:'+res.status)
              }
            })
          },
          //播放预告片
          _playVideo(url){
            this.indexVideo =url
            setTimeout(()=>{
              this.$refs['video'].play()
            },200)
          },
          //touch监听
          _touchEvent(e){
            if(e.type==='swipeleft'){
              if(this.posterIndex<this.posterList.length-1){
                this.posterIndex++
              }else {
                this.posterIndex = 0
              }
            }
            if(e.type==='swiperight'){
              if(this.posterIndex===0){
                this.posterIndex = this.posterList.length-1
              }else {
                this.posterIndex--
              }
            }
          },
          //预览图片
          _browsePicture(index,list,type){
            switch (type) {
              case 0:
                    this.mask = true
                    this.posterList = list
                    this.posterIndex = index
                break
              case 1:
                    this.mask = true
                    console.log(list)
                    let posterArr = []
                    for(let i=0;i<list.length;i++){
                      posterArr.push(list[i].url)
                    }
                    this.posterList = posterArr
            }

          },
          //获取页面详情
          _getMovieDetail(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/filmDetail',
                data:{
                  id:this.$route.query.id
                }
              }
            ).then((res)=>{
             if(res.status===global.ERR_OK){
               if(res.data.code===0){
                 this.isLoading = false
                 let data =res.data.data
                 this.filmInfo = data
                 this.filmName = data.name
                 if(data.buyStatus===3){
                   this.text='已售完'
                 }
                 if(data.wantSeeStatus === 1){
                   this.isCollect = true
                 }else {
                   this.isCollect = false
                 }
                 if(data.commentStatus===1){
                   this.isRating = true
                 }else {
                   this.isRating = false
                 }
               }else{
                Toast(res.data.errorMsg)
               }
             }else{
               Toast('服务器错误,错误代码:'+res.status)
             }
            })
          },
          //显示更多
          _toggleShowMore(){
            this.isShowMore=!this.isShowMore
          },
          _showMaskLayer(src){
            // console.log(src)
              this.popupVisible = true
              this.indexVideo = src
          }
        },
        computed:{
          _posterUrl(){
            return this.posterList[this.posterIndex]
          }
        },
        watch:{
          'posterList'(){

          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .mask-layer
    position absolute
    height 100%
    width 100%
    background rgba(0,0,0,.7)
    z-index 100000
    &.fade-enter-active, &.fade-leave-active
      transition: opacity .5s
    &.fade-enter, &.fade-leave-to
      opacity:0
    .close
      position absolute
      z-index 1000000
      right 15px
      top 15px
      background url("icon_cancel.svg") no-repeat center/100% 100%
      height 18px
      width 18px
    .pic-wrapper
      position absolute
      top 50%
      left 50%
      transform translate(-50%,-50%)

  .onlineMovieDetails
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .mint-popup
      width 100%
    .mask-video-wrapper
      font-size 0
      width 100%
      background #000000
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content-wrapper
      height calc(100% - 83px)
      overflow hidden
      padding 0
      .top
        padding 0 15px
        .film-introduction
          display flex
          .left
            flex 0 0 96px
            height 140px
            background url("bg_poster.png")no-repeat center center/100% 100%
          .right
            flex 1
            padding-left 20px
            text-align left
            .name
              height 22px
              line-height 22px
              color #ffffff
              font-weight 500
              padding-top 12px
            .score-wrapper
              padding-top 6px
              .score-name
                height 17px
                line-height 17px
                font-size 12px
                color #ACB1BB
              .score-count
                height 18px
                line-height 18px
                font-size 13px
                color #F7C20F
            .movie-type
              .movie-type-text,.movie-type-tags
                display inline-block
              .movie-type-text
                height 17px
                line-height 17px
                font-size  12px
                color #ACB1BB
                vertical-align top
              .movie-type-tags
                .movie-type-tag
                  display inline-block
                  padding 0px 2px
                  margin-top 2px
                  border-radius 2px
                  height 11px
                  line-height 14px
                  background #70A4C0
                  font-size 9px
                  color #ffffff
                  vertical-align top
            .movie-text
              height 17px
              line-height 17px
              color #ACB1BB
              font-size 12px
              margin-top 4px
        .btn-wrapper
          display flex
          margin-top 24px
          .item
            flex 1
            height 32px
            text-align center
            .btn
              width 150px
              height 32px
              border-radius 16px
              border none
              outline none
              background #212122
              color #C4C4C4
              font-size 14px
              .icon_star
                vertical-align center
                display inline-block
                height 12px
                width 12px
                background url("icon_want2.png") no-repeat center/12px 12px
                &.isCollect
                  background url("icon_want.png") no-repeat center/12px 12px
              .icon_collect
                vertical-align center
                display inline-block
                height 12px
                width 12px
                background url("icon_rating.png") no-repeat center/12px 12px
                &.isRating
                  background url("icon_rating2.png") no-repeat center/12px 12px
        .text-wrapper
          padding 20px 10px 10px 10px
          max-height 96px
          text-align left
          color #E8E8E8
          font-size 13px
          line-height 25px
          overflow hidden
          text-overflow ellipsis
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical
          &.more
            max-height 1000px
            -webkit-line-clamp: 1000;
        .show-more-wrapper
          height 12px
          text-align center
          .btn
            /*background url("")*/
            margin 0 auto
            width 24px
            height 12px
            &.hiddenMore
              background url("icon_arrow_top.svg")no-repeat center /12px 6px
            &.showMore
              background url("icon_arrow_bottom.svg")no-repeat center /12px 6px
      .center
        .video-wrapper
          overflow hidden
          padding 16px 15px
          margin-top 10px
          background #171718
          margin-bottom 10px
          .name
            height 22px
            line-height 22px
            color #F2F2F2
            text-align left
            padding 0
            font-size 16px
            margin-bottom 12px
          .content
            overflow hidden
          .video-container
            text-align left
            padding 15px 0
            overflow hidden
            width 799px

            .item
              position relative
              height 86px
              width 129px
              margin-right 5px
              float left
              &:last-child
                margin-right 0
              .icon-play
                position absolute
                top 21px
                left 40.5px
                height 48px
                width 48px
                background url("icon_play.svg")no-repeat center/48px 48px
        .poster-wrapper
          padding 16px 15px 14px 15px
          background #171718
          .name
            text-align left
            color #ffffff
            height 22px
            line-height 22px
            font-size 16px
          .content
            margin-top 12px
            .poster-container
              font-size 0
              text-align left
              width 799px
              .item
                display inline-block
                margin-right 5px
                height 86px
                width 129px
                background url("bg_poster_block.png")no-repeat center/100% 100%
                &:last-child
                  margin-right 0
        .actor-wrapper
          margin-top 10px
          padding 16px 15px 9px 15px
          background #171718
          .name
            text-align left
            color #ffffff
            font-size 16px
            height 22px
            line-height 22px
          .content
            overflow hidden
            .content-container
              text-align left
              font-size 0
              .item
                width 70px
                text-align center
                margin-right 10px
                display inline-block
                &:last-child
                  margin-right 0
                .item-img-wrapper
                  height 90px
                  margin-top 12px
                  background url('bg_poster.png')no-repeat center center/100% 100%
                .actor-name
                  width 48px
                  overflow hidden
                  text-overflow ellipsis
                  white-space nowrap
                  color #F2F2F2
                  height 17px
                  line-height 17px
                  margin 3px auto 0 auto
                  font-size 12px
                  text-align center
                .actor-portray
                  color #8B929E
                  font-size 12px
                  height 17px
                  line-height 17px
                  overflow hidden
                  text-overflow ellipsis
                  white-space nowrap
                  margin 0 auto
        .ratings-wrapper
          background #171718
          margin-top 10px
          text-align left
          padding 16px 15px 18px 15px
          .name
            height 22px
            color #ffffff
            font-size 16px
            line-height 22px
          .content
            .row
              border-1px(#343434)
              .user
                display flex
                margin-top 16px
                height 36px
                .left
                  flex 0 0 36px
                  border-radius 18px
                .right
                  flex 1
                  margin-left 10px
                  .user-name
                    height 20px
                    line-height 20px
                    color #ffffff
                    font-size 14px
                  .user-score
                    height 12px
                    margin-top 2px
              .ratings
                padding 0 3px
                color #E8E8E8
                margin-top 8px
                font-size 13px
                line-height 20px
              .time
                height 14px
                font-size 10px
                line-height 14px
                padding 5px 0 6px 0
                color #8B929E
            .load-more-wrapper
              padding-top 15px
              text-align center
              height 17px
              line-height 17px
              color #8B929E
              font-size 12px
              .load-more
                display inline-block
                width 70px
                background url("arrow_right.svg") no-repeat 65px 3px /5px 10px
    .btn-bottom-wrapper
      position absolute
      width 100%
      bottom 0
      height 44px
      color #161719
      .btn-bottom
        height 100%
        width 100%
        border none
        background #F7C20F
        color #161719
        line-height 22px
        outline none
        font-size 16px
        &.noTicket
          background #8B929E
          color #ffffff
          &:active
            background #8B929E
        &:active
          background #ebb90e
</style>
